<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>

    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">设备管理</a>

      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so layui-form-pane">

            <input class="layui-input" placeholder="隐患描述" id="troubleDescription" style="width: 300px ">
            <button class="layui-btn" type="button" id="deviceRecognition"><i class="layui-icon">&#xe6b2</i>设备识别
            </button>
        </form>
    </div>

    <blockquote class="layui-elem-quote">
        注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。
    </blockquote>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div class="layui-col-md6">
        <div id="nodes" style="width: 100%;height:600px;background: #fdf6e3; margin-right: 5px">
        </div>
    </div>
    <div class="layui-col-md6">
        <div id="troubles" style="width: 100%;height:600px;background: #fdf6e3;margin-left: 5px ">
        </div>
    </div>



</div>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
<link rel="stylesheet" type="text/css" href="js/formSelects-v4.css"/>
<script src="js/formSelects-v4.js" charset="utf-8"></script>
<script src="js/httpRequst.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        form = layui.form;
        var layer = layui.layer
        var myChartDevices = echarts.init(document.getElementById('nodes'))//初始化，如果你的容器id为main的<div></div>
        var myChartTroubles = echarts.init(document.getElementById('troubles'))//初始化，如果你的容器id为main的<div></div>


        // $.getJSON('data/initdata.json', function (res) {
        //     console.log(res)
        //     deviceNodePic(res)
        //
        // })
        drawDevice()
        drawTrouble()

        var dispatchkey = true
        //设备识别
        $("#deviceRecognition").on('click', function (e) {

            jeecg.ajaxJsonGet("nlp/content", {"content": $("#troubleDescription").val()}, function (res) {

                for (var index = 0; index < res.length; index++) {

                    if (dispatchkey) {

                        myChartTroubles.dispatchAction({

                            type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者
                            // 可选，系列 index，可以是一个数组指定多个系列
                            name: res[index].title
                        });
                    } else {
                        myChartTroubles.dispatchAction({
                            type: 'downplay',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者
                            // seriesIndex: ['0','1','2'],  // 可选，系列 index，可以是一个数组指定多个系列
                            name: res[index].title
                        });

                    }

                }
                for (var index = 0; index < res.length; index++) {

                    if (dispatchkey) {

                        myChartDevices.dispatchAction({

                            type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者
                            // 可选，系列 index，可以是一个数组指定多个系列
                            name: res[index].title
                        });
                    } else {
                        myChartDevices.dispatchAction({
                            type: 'downplay',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者
                            // seriesIndex: ['0','1','2'],  // 可选，系列 index，可以是一个数组指定多个系列
                            name: res[index].title
                        });

                    }

                }
                dispatchkey = !dispatchkey
            })


        });
        // 渲染隐患
        function drawTrouble(){
            jeecg.ajaxJson('database/trouble/all', {}, function (result) {
                var nodes = [];
                var data = {name:'隐患'}
                data.children = []

                for (index in result) {
                    var dataitem = {}

                    dataitem.id = result[index].id
                    dataitem.name = result[index].name
                    dataitem.itemStyle = {
                        "normal": {
                            "color": "rgb(236,81,72)"
                        }
                    }
                    dataitem.symbolSize = (result[index].拥有 == null ? 10 : 10 + result[index].拥有.length * 2)
                    dataitem.attributes = {
                        "modularity_class": 0
                    }
                    dataitem.children = []
                    if (result[index].拥有 != null) {
                        for (var index1 = 0; index1 < result[index].拥有.length; index1++) {
                            var linkitem = {}
                            linkitem.id = index + index1
                            linkitem.name = result[index].拥有[index1].title
                            linkitem.source = dataitem.id.toString()
                            console.log(index + "   " + index1)
                            linkitem.target = result[index].拥有[index1].id.toString()
                            linkitem.lineStyle = {
                                "normal": {}
                            }
                            dataitem.children.push(linkitem)

                        }
                    }
                    data.children.push(dataitem)
                }



                console.log("data",data);
                troubleNodePic(data,myChartTroubles,'trouble','隐患引力图')
            })
        }
        //渲染设备引力图
        function drawDevice() {
            jeecg.ajaxJson('database/device/all', {}, function (result) {
                var nodes = [];
                var graph = {}
                var links = []

                for (index in result) {
                    var dataitem = {}

                    dataitem.id = result[index].id
                    dataitem.name = result[index].title
                    dataitem.itemStyle = {
                        "normal": {
                            "color": "rgb(236,81,72)"
                        }
                    }
                    dataitem.symbolSize = (result[index].拥有 == null ? 20 : 30  )
                    dataitem.attributes = {
                        "modularity_class": 0
                    }
                    nodes.push(dataitem)
                    if (result[index].拥有 != null) {
                        for (var index1 = 0; index1 < result[index].拥有.length; index1++) {
                            var linkitem = {}
                            linkitem.id = index + index1
                            linkitem.name = "拥有"
                            linkitem.source = dataitem.id.toString()

                            linkitem.target = result[index].拥有[index1].id.toString()
                            linkitem.lineStyle = {
                                "normal": {}
                            }
                            links.push(linkitem)
                        }
                    }
                }


                graph.nodes = nodes
                graph.links = links

                console.log(graph)
                deviceNodePic(graph,myChartDevices,'device','设备引力图')
            })
        }
        //渲染图 图数据 chart对象 实体名称
        function troubleNodePic(graph,drawChart,object,chartName) {
            drawChart.showLoading();
            option = {
                title: {
                    text: chartName,

                    top: 'top',
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [graph],

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,

                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }

            //右键菜单
            var kyoPopupMenu = {};
            var selectedPoint;
            kyoPopupMenu = (function () {
                return {
                    sys: function (obj) {
                        $('.popup_menu').remove();
                        popupMenuApp = $('<div class="popup_menu app-menu" style="background: white"><ul><li><a menu="menu1">添加成员</a></li><li><a menu="menu2">删除</a></li><li><a menu="menu3">取消</a></li>  </ul></div>')
                            .find('a').attr('href', 'javascript:;')
                            .end().appendTo('body');
                        //绑定事件
                        $('.app-menu a[menu="menu1"]').on('click', function () {
                            layer.open({
                                zIndex: 9999999999,
                                title: '选择设备部件',
                                content: [
                                    '<form class="layui-form"><select name="item" id="adddevice" lay-search="">',

                                    '</select></form>'
                                ].join(''),
                                success: function () {
                                    layer.closeAll('loading');
                                    popupmenu.css({left: l, top: t}).hide();
                                    jeecg.ajaxJson('database/device/all', {}, function (result) {
                                        $('#adddevice').empty();
                                        $('#adddevice').append("<option value=''>请选择设备</option>");
                                        for (var i = 0; i < result.length; i++) {


                                            $('#adddevice').append("<option value='"
                                                + result[i].title + "'>" + result[i].title
                                                + "</option>");


                                        }

                                        form.render();
                                    });

                                    $('#adddevice').parents('.layui-layer-content').css('overflow', 'inherit');

                                },
                                yes: function (index, layero) {
                                    //do something

                                    jeecg.ajaxJsonGet('database/'+object+'/addDevice', {
                                        troubleName: selectedPoint.name,
                                        deviceTitle: $('#adddevice').val()
                                    }, function (result) {
                                        //刷新图
                                        drawDevice()
                                        layer.msg('操作成功', {icon: 1, zIndex: 9999999999}, 500);
                                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                                    });


                                }
                            });
                        });
                        $('.app-menu a[menu="menu2"]').on('click', function () {
                            jeecg.ajaxJson('database/'+object+'/del', {
                                title: selectedPoint.name,
                            }, function (result) {
                                //刷新图
                                drawDevice()
                                layer.msg('操作成功', {icon: 1, zIndex: 9999999999}, 500);
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            });
                        });
                        $('.app-menu a[menu="menu3"]').on('click', function () {
                            popupmenu.css({left: l, top: t}).hide();
                        });

                        return popupMenuApp;
                    }
                }
            })();

            var popupmenu = kyoPopupMenu.sys();


            drawChart.on('click', function (params) {
                console.log(params.data)
                selectedPoint = params
                l = ($(document).width() - params.event.event.clientX) < popupmenu.width() ? (params.event.event.clientX - popupmenu.width()) : params.event.event.clientX;
                t = ($(document).height() - params.event.event.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : params.event.event.clientY;
                popupmenu.css({left: l, top: t}).show();
            });

            drawChart.setOption(option);
            drawChart.hideLoading();

        }
        function deviceNodePic(graph,drawChart,object,chartName) {


            drawChart.showLoading();


            var categories = [{name: '电梯'}, {name: '叉车'}, {name: '起重机'}, {name: '龙门吊'}, {name: '镀锌生产线'}];


            graph.nodes.forEach(function (node) {
                node.itemStyle = null;
                node.value = node.symbolSize;
                node.symbolSize /= 1.5;
                node.label = {
                    normal: {
                        show: true
                    }
                };
                node.category = node.attributes.modularity_class;
            });
            option = {
                title: {
                    text: chartName,

                    top: 'top',
                    left: 'right'
                },
                tooltip: {},
                legend: [{
                    selectedMode: 'single',
                    data: categories.map(function (a) {
                        return a.name;
                    })
                }],
                animationDuration: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        name: '设备引力图',
                        type: 'graph',
                        layout: 'circular',
                        circular: {
                            rotateLabel: true
                        },
                        data: graph.nodes,
                        links: graph.links,
                        categories: categories,
                        roam: true,
                        focusNodeAdjacency: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        label: {
                            position: 'right',
                            formatter: '{b}'
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.1
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'outer'
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'red'
                                }
                            },
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                ]
            };

            //右键菜单
            var kyoPopupMenu = {};
            var selectedPoint;
            kyoPopupMenu = (function () {
                return {
                    sys: function (obj) {
                        $('.popup_menu').remove();
                        popupMenuApp = $('<div class="popup_menu app-menu" style="background: white"><ul><li><a menu="menu1">添加成员</a></li><li><a menu="menu2">删除</a></li><li><a menu="menu3">取消</a></li>  </ul></div>')
                            .find('a').attr('href', 'javascript:;')
                            .end().appendTo('body');
                        //绑定事件
                        $('.app-menu a[menu="menu1"]').on('click', function () {
                            layer.open({
                                zIndex: 9999999999,
                                title: '选择设备部件',
                                content: [
                                    '<form class="layui-form"><select name="item" id="adddevice" lay-search="">',

                                    '</select></form>'
                                ].join(''),
                                success: function () {
                                    layer.closeAll('loading');
                                    popupmenu.css({left: l, top: t}).hide();
                                    jeecg.ajaxJson('database/'+object+'/all', {}, function (result) {
                                        $('#adddevice').empty();
                                        $('#adddevice').append("<option value=''>请选择设备</option>");
                                        for (var i = 0; i < result.length; i++) {


                                            $('#adddevice').append("<option value='"
                                                + result[i].title + "'>" + result[i].title
                                                + "</option>");


                                        }

                                        form.render();
                                    });

                                    $('#adddevice').parents('.layui-layer-content').css('overflow', 'inherit');

                                },
                                yes: function (index, layero) {
                                    //do something

                                    jeecg.ajaxJsonGet('database/'+object+'/setRelationHas', {
                                        deviceTitle1: selectedPoint.name,
                                        deviceTitle2: $('#adddevice').val()
                                    }, function (result) {
                                        //刷新图
                                        drawDevice()
                                        layer.msg('操作成功', {icon: 1, zIndex: 9999999999}, 500);
                                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                                    });


                                }
                            });
                        });
                        $('.app-menu a[menu="menu2"]').on('click', function () {
                            jeecg.ajaxJson('database/'+object+'/del', {
                                title: selectedPoint.name,
                            }, function (result) {
                                //刷新图
                                drawDevice()
                                layer.msg('操作成功', {icon: 1, zIndex: 9999999999}, 500);
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            });
                        });
                        $('.app-menu a[menu="menu3"]').on('click', function () {
                            popupmenu.css({left: l, top: t}).hide();
                        });

                        return popupMenuApp;
                    }
                }
            })();

            var popupmenu = kyoPopupMenu.sys();


            drawChart.on('click', function (params) {
                console.log(params.data)
                selectedPoint = params
                l = ($(document).width() - params.event.event.clientX) < popupmenu.width() ? (params.event.event.clientX - popupmenu.width()) : params.event.event.clientX;
                t = ($(document).height() - params.event.event.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : params.event.event.clientY;
                popupmenu.css({left: l, top: t}).show();
            });

            drawChart.setOption(option);
            drawChart.hideLoading();

        }
    });
</script>
<link rel="stylesheet" type="text/css" href="js/wheelmenu.css"/>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>

</body>

</html>